<template>
  <el-card class="box-card" shadow="never">

    <div slot="header" class="card-header">
      <span class="card-head-title">{{ title }}</span>
      <el-button size="small" @click="handleAdd()">添加</el-button>
    </div>
    <div class="card-body">
      <el-form ref="variableListForm">
        <el-table
          ref="variableListTable"
          :data="tableData"
          v-if="showTable"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column v-if="selection" type="selection" width="55"></el-table-column>
          <el-table-column
            v-for="(item,index,key) in tableColumns"
            :key="item.edit"
            :align="item.align"
            :index="index"
            :item="item"
            :label="item.label"
          >
            <template slot-scope="scope">
              <el-input
                v-if=" scope.row.edit"
                v-model="scope.row[item.prop]"
                :placeholder="'请输入'+item.label"
                size="small"
              ></el-input>
              <span v-if="!scope.row.edit">{{ scope.row[item.prop] }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <!-- 全局控制的编辑 -->
              <div v-if="isEdit" style="display: inline-block;">
                <!-- 编辑 -->
                <el-button
                  v-if="!scope.row.edit"
                  type="text"
                  @click="handleEdit(scope.$index, scope.row)"
                >修改
                </el-button>
                <el-divider v-if="!scope.row.edit" direction="vertical"></el-divider>
                <!-- 删除 -->
                <el-button
                  v-if="!scope.row.edit"
                  type="text"
                  @click="handleDelete(scope.$index, scope.row)"
                >删除
                </el-button>
              </div>

              <!-- 添加控制 -->
              <div v-if="isEdit" style="display: inline-block;">
                <!-- 确认 -->
                <el-button
                  v-if="scope.row.edit"
                  type="text"
                  @click="handleSave(scope.$index, scope.row)"
                >保存
                </el-button>
                <el-divider v-if="scope.row.edit" direction="vertical"></el-divider>
                <!-- 取消 -->
                <el-button
                  v-if="scope.row.edit"
                  type="text"
                  @click="handleCancel(scope.$index, scope.row)"
                >取消
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'VariableList',
  props: {
    //表头信息
    tableColumns: {
      type: Array, default: () => []
    },
    //表格数据
    tableData: {
      type: Array, default: () => []
    },
    title: {
      type: String, default: () => ''
    }
  },
  data() {
    return {
      newDateJson: {}, //数据结构
      multipleSelection: [], //复选框，数据
      isEdit: true, //是否可编辑
      isDelete: true, //是否可删除
      selection: true, //是否需要复选框
      showTable: true,
    }
  },
  mounted: function() {
    this.initEditAttribute()
    //确保方法在页面渲染后调用
    this.$nextTick(function() {
      //方法
    })
  },
  watch: {
    tableData: function() {
      //监听数据变化f
      this.$nextTick(function() {

      })
    }
  },
  methods: {
    // 刷新表格
    refreshTable () {
      this.showTable = false
      this.$nextTick(() => {
        this.showTable = true
      })
    },

    //多选框
    handleSelectionChange(val) {
      this.multipleSelection = val
      console.log('selection:', this.multipleSelection)
    },
    handleCancel(index, row) {
      console.log('cancel', index, row)
      row.edit = false;
      this.refreshTable();
    },
    //编辑
    handleEdit(index, row) {
      console.log('edit', index, row)
      row.edit = true;
      this.refreshTable();
    },
    //删除
    handleDelete(index, row) {
      this.tableData.splice(index, 1)
      this.$emit('delete', row)
      this.refreshTable();
    },
    //保存
    handleSave(index, row) {
      row.edit = false
      this.$emit('save', row)
      this.refreshTable();
    },
    handleAdd() {
      let addDataJson = {}
      for (let key in this.newDateJson) {
        if (key === 'edit') {
          delete addDataJson[key]
        } else {
          addDataJson[key] = ''
        }
      }
      addDataJson.edit = true
      this.tableData.push(addDataJson)
      this.refreshTable();
    },
    //初始化编辑属性
    initEditAttribute() {
      let dataArray = this.tableData

      if (dataArray.length > 0) {
        //添加编辑事件
        for (let index in dataArray) {
          dataArray[index]['edit'] = false
          this.tableData.push(dataArray[index])
        }

        if (Object.keys(this.newDateJson).length === 0) {
          //新增时，初始化数据结构
          this.initAddDataJson(dataArray[0])
        }
      }
    },
    initAddDataJson(dataArray) {
      //新增时，初始化数据结构
      let dataJson = dataArray
      let newDateJson = {}
      for (let key in dataJson) {
        if (key === 'edit') {
          newDateJson[key] = 'true'
        } else {
          newDateJson[key] = ''
        }
      }
      this.newDateJson = newDateJson
    }
  }
}
</script>
<style lang="scss">
@import "~@/assets/styles/page-detail.scss";
</style>
<style lang="scss" scoped>
@import "~@/assets/styles/page-detail-scoped.scss";
</style>
